Obvladovanje usmerjenosti zaslona: Celovit vodnik za ravnanje z vrtenjem naprave

V današnjem svetu z več napravami je elegantno obvladovanje usmerjenosti zaslona ključnega pomena za zagotavljanje pozitivne uporabniške izkušnje. Ne glede na to, ali gre za pametni telefon, tablico ali celo zložljivo napravo, uporabniki pričakujejo, da se bodo aplikacije ob vrtenju naprave brezhibno prilagodile. Ta vodnik ponuja celovit pregled ravnanja z vrtenjem naprave, ki zajema različne platforme in tehnike za zagotovitev, da so vaše aplikacije odzivne in uporabniku prijazne.

Razumevanje usmerjenosti zaslona

Usmerjenost zaslona se nanaša na smer, v kateri je vsebina prikazana na zaslonu naprave. Dve primarni usmerjenosti sta:

• Pokončno (Portrait): Zaslon je višji kot širši. To je običajna usmerjenost za pametne telefone.
• Ležeče (Landscape): Zaslon je širši kot višji. To je pogosto prednostna usmerjenost za gledanje videoposnetkov ali igranje iger.

Nekatere naprave in aplikacije podpirajo tudi:

• Obratno pokončno (Reverse Portrait): Pokončna usmerjenost z napravo, zasuka za 180 stopinj.
• Obratno ležeče (Reverse Landscape): Ležeča usmerjenost z napravo, zasuka za 180 stopinj.

Zakaj obvladovati spremembe usmerjenosti zaslona?

Neupoštevanje sprememb usmerjenosti zaslona lahko povzroči različne težave, vključno z:

• Težavami z postavitvijo: Elementi so lahko neporavnani, odrezani ali se med seboj prekrivajo.
• Izgubo podatkov: V nekaterih primerih se lahko stanje dejavnosti ali aplikacije ob vrtenju zaslona izgubi.
• Slabo uporabniško izkušnjo: Neprijetna ali prekinjena izkušnja lahko frustrira uporabnike in škodi ugledu vaše aplikacije.
• Težavami z zmogljivostjo: Pogosto ponovno izrisovanje in izračuni postavitve lahko vplivajo na zmogljivost, zlasti na starejših napravah.

Ravnanje z usmerjenostjo zaslona na različnih platformah

Specifične tehnike za ravnanje z usmerjenostjo zaslona se razlikujejo glede na platformo, za katero razvijate. Poglejmo si nekatere najbolj priljubljene platforme:

1. Android

Android ponuja več mehanizmov za ravnanje s spremembami usmerjenosti zaslona. Najpogostejši pristopi vključujejo:

a. Spremembe konfiguracije

Privzeto Android ponovno ustvari Activity, ko se spremeni usmerjenost zaslona. To pomeni, da se metoda `onCreate()` ponovno pokliče in celotna postavitev se ponovno napihne. Čeprav je to lahko koristno za popolno prestrukturiranje uporabniškega vmesnika glede na usmerjenost, je lahko tudi neučinkovito, če morate le rahlo prilagoditi postavitev.

Da preprečite ponovno ustvarjanje Activity, lahko v datoteki `AndroidManifest.xml` deklarirate, da vaša Activity sama obravnava spremembo konfiguracije `orientation`:

<activity
 android:name=".MyActivity"
 android:configChanges="orientation|screenSize"
 ... >
</activity>

Z dodajanjem `orientation` in `screenSize` (pomembno za API raven 13 in višje) sistemu sporočite, da bo vaša Activity sama obravnavala spremembe usmerjenosti. Ob vrtenju zaslona se bo poklicala metoda `onConfigurationChanged()`.

@Override
public void onConfigurationChanged(Configuration newConfig) {
 super.onConfigurationChanged(newConfig);

 // Preverite usmerjenost zaslona
 if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
 Toast.makeText(this, "landscape", Toast.LENGTH_SHORT).show();
 } else if (newConfig.orientation == Configuration.ORIENTATION_PORTRAIT){
 Toast.makeText(this, "portrait", Toast.LENGTH_SHORT).show();
 }
}

Znotraj `onConfigurationChanged()` lahko posodobite uporabniški vmesnik glede na novo usmerjenost. Ta pristop je učinkovitejši od ponovnega ustvarjanja Activity, saj se izogne nepotrebnemu nalaganju virov in napihovanju postavitve.

b. Shranjevanje in obnavljanje stanja Activity

Tudi če sami obravnavate spremembo konfiguracije, boste morda še vedno morali shraniti in obnoviti stanje Activity. Na primer, če ima vaša Activity besedilno polje, boste želeli ohraniti besedilo, ki ga je uporabnik vnesel, ko se zaslon zasuka.

Za shranjevanje stanja Activity lahko uporabite metodo `onSaveInstanceState()`, za obnavljanje pa metodo `onRestoreInstanceState()`.

@Override
public void onSaveInstanceState(Bundle savedInstanceState) {
 savedInstanceState.putString("my_text", myTextView.getText().toString());
 super.onSaveInstanceState(savedInstanceState);
}

@Override
public void onRestoreInstanceState(Bundle savedInstanceState) {
 super.onRestoreInstanceState(savedInstanceState);
 String myText = savedInstanceState.getString("my_text");
 myTextView.setText(myText);
}

Alternativno lahko za upravljanje in ohranjanje podatkov, povezanih z uporabniškim vmesnikom, med spremembami konfiguracije uporabite ViewModels s SavedStateHandle, kar je sodobnejši in priporočen pristop.

c. Alternativne postavitve

Android omogoča, da zagotovite različne datoteke postavitve za različne usmerjenosti zaslona. Ločene datoteke postavitve lahko ustvarite v mapah `res/layout-land/` in `res/layout-port/`. Ko se zaslon zasuka, bo Android samodejno naložil ustrezno datoteko postavitve.

Ta pristop je uporaben, kadar se mora uporabniški vmesnik v ležeči in pokončni usmerjenosti bistveno razlikovati. Na primer, morda boste želeli v ležečem načinu prikazati postavitev z dvema podoknoma, v pokončnem pa z enim.

d. Uporaba ConstraintLayout

ConstraintLayout je zmogljiv upravitelj postavitve, ki omogoča ustvarjanje prilagodljivih in prilagodljivih postavitev. S ConstraintLayout lahko določite omejitve, ki določajo, kako naj bodo pogledi postavljeni glede na druge in na nadrejeno postavitev. To olajša ustvarjanje postavitev, ki se prilagajajo različnim velikostim in usmerjenostim zaslona.

2. iOS

iOS prav tako ponuja mehanizme za ravnanje s spremembami usmerjenosti zaslona. Tu je nekaj pogostih pristopov:

a. Auto Layout

Auto Layout je sistem postavitve, ki temelji na omejitvah in vam omogoča, da določite pravila za pozicioniranje in velikost pogledov. Omejitve Auto Layout zagotavljajo, da se vaš uporabniški vmesnik prilagaja različnim velikostim in usmerjenostim zaslona.

Pri uporabi Auto Layout običajno določite omejitve, ki določajo razmerja med pogledi. Na primer, gumb lahko omejite tako, da je vodoravno in navpično na sredini znotraj nadrejenega pogleda. Ko se zaslon zasuka, mehanizem Auto Layout samodejno ponovno izračuna položaje in velikosti pogledov, da zadosti omejitvam.

b. Razredi velikosti (Size Classes)

Razredi velikosti so način za kategorizacijo velikosti in usmerjenosti zaslona. iOS določa dva razreda velikosti: `Compact` in `Regular`. Naprava ima lahko različne razrede velikosti za svojo širino in višino. Na primer, iPhone v pokončni usmerjenosti ima razred velikosti `Compact` za širino in `Regular` za višino. V ležečem načinu ima pogosto `Compact` višino in `Compact` ali `Regular` širino, odvisno od modela.

Razrede velikosti lahko uporabite za prilagoditev uporabniškega vmesnika glede na velikost in usmerjenost zaslona. Na primer, morda boste želeli prikazati drugačen nabor pogledov ali uporabiti različne pisave za različne razrede velikosti.

Različne omejitve in celo namestitev/odstranitev pogledov glede na razrede velikosti lahko konfigurirate neposredno v Interface Builderju ali programsko.

c. Metode vrtenja v View Controllerju

iOS ponuja več metod v razredu UIViewController, ki se pokličejo ob vrtenju naprave:

• viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator): Pokliče se, preden se pogled view controllerja spremeni velikost za prehod.
• viewWillLayoutSubviews(): Pokliče se tik preden pogled view controllerja razporedi svoje podoglede.
• viewDidLayoutSubviews(): Pokliče se takoj po tem, ko pogled view controllerja razporedi svoje podoglede.

Te metode lahko prepišete, da ob vrtenju zaslona izvedete prilagoditve postavitve po meri.

d. Notification Center

Z uporabo Notification Center lahko poslušate obvestila o spremembi usmerjenosti:

NotificationCenter.default.addObserver(self, selector: #selector(orientationChanged), name: UIDevice.orientationDidChangeNotification, object: nil)

@objc func orientationChanged() {
 if UIDevice.current.orientation.isLandscape {
 print("Landscape")
 } else {
 print("Portrait")
 }
}

3. Spletni razvoj (HTML, CSS, JavaScript)

Pri spletnem razvoju lahko za ravnanje s spremembami usmerjenosti zaslona uporabite CSS medijske poizvedbe in JavaScript.

a. CSS medijske poizvedbe (Media Queries)

Medijske poizvedbe omogočajo uporabo različnih stilov glede na velikost zaslona, usmerjenost in druge značilnosti. Značilnost `orientation` lahko uporabite za ciljanje na določene usmerjenosti.

/* Pokončna usmerjenost */
@media (orientation: portrait) {
 body {
 background-color: lightblue;
 }
}

/* Ležeča usmerjenost */
@media (orientation: landscape) {
 body {
 background-color: lightgreen;
 }
}

Medijske poizvedbe lahko uporabite za prilagoditev postavitve, pisav in drugih stilov glede na usmerjenost.

b. JavaScript

Z JavaScriptom lahko zaznate spremembe usmerjenosti zaslona in izvedete dejanja po meri. API `screen.orientation` ponuja informacije o trenutni usmerjenosti.

function handleOrientationChange() {
 if (screen.orientation.type === "landscape-primary" || screen.orientation.type === "landscape-secondary") {
 console.log("Landscape");
 } else if (screen.orientation.type === "portrait-primary" || screen.orientation.type === "portrait-secondary") {
 console.log("Portrait");
 } else {
 console.log("Unknown orientation");
 }
}

window.addEventListener("orientationchange", handleOrientationChange);

Alternativno lahko uporabite API `matchMedia` z medijskimi poizvedbami:

const landscapeMediaQuery = window.matchMedia("(orientation: landscape)");

function handleOrientationChange(event) {
 if (event.matches) {
 console.log("Landscape");
 } else {
 console.log("Portrait");
 }
}

landscapeMediaQuery.addEventListener("change", handleOrientationChange);

JavaScript lahko uporabite za dinamično prilagajanje postavitve, nalaganje različnih virov ali izvajanje drugih dejanj glede na usmerjenost.

c. Okvirji za odzivno oblikovanje

Okvirji, kot so Bootstrap, Foundation in Materialize CSS, ponujajo vgrajeno podporo za odzivno oblikovanje, kar olajša ustvarjanje postavitev, ki se prilagajajo različnim velikostim in usmerjenostim zaslona. Ti okvirji običajno uporabljajo mrežni sistem in medijske poizvedbe za ustvarjanje prilagodljivih in odzivnih uporabniških vmesnikov.

Najboljše prakse za ravnanje z usmerjenostjo zaslona

Tu je nekaj najboljših praks, ki jih je treba upoštevati pri ravnanju s spremembami usmerjenosti zaslona:

• Izogibajte se nepotrebnemu ponovnemu ustvarjanju Activity/ViewControllerja: Če je mogoče, sami obravnavajte spremembo konfiguracije, da se izognete bremenu ponovnega ustvarjanja Activity ali ViewControllerja.
• Shranite in obnovite stanje: Vedno shranite in obnovite stanje Activity/ViewControllerja, da preprečite izgubo podatkov. Uporabite ViewModels za bolj robustno upravljanje stanja.
• Uporabite Auto Layout ali ConstraintLayout: Ti sistemi postavitve olajšajo ustvarjanje prilagodljivih in prilagodljivih postavitev.
• Testirajte na več napravah: Testirajte svojo aplikacijo na različnih napravah z različnimi velikostmi in usmerjenostmi zaslona, da zagotovite pravilno delovanje.
• Upoštevajte dostopnost: Zagotovite, da vaša aplikacija ostane dostopna uporabnikom s posebnimi potrebami, ko se zaslon zasuka.
• Zagotovite jasne vizualne namige: Če se uporabniški vmesnik ob vrtenju zaslona bistveno spremeni, zagotovite jasne vizualne namige, ki uporabnikom pomagajo razumeti spremembe.
• Izogibajte se vsiljevanju določene usmerjenosti (razen če je to nujno): Uporabnikom omogočite uporabo naprave v njihovi željeni usmerjenosti, kadar koli je to mogoče. Vsiljevanje usmerjenosti je lahko frustrirajoče in neprijetno. Usmerjenost zaklenite le, če je to ključnega pomena za funkcionalnost aplikacije (npr. igra, ki zahteva ležeči način). Če zaklenete usmerjenost, jasno sporočite razlog uporabniku.
• Optimizirajte za zmogljivost: Zmanjšajte količino dela, ki ga je treba opraviti ob vrtenju zaslona, da se izognete težavam z zmogljivostjo.
• Uporabite relativne enote: Pri določanju velikosti in položajev v vaši postavitvi uporabite relativne enote (npr. odstotki, `dp`, `sp`) namesto absolutnih enot (npr. piksli), da zagotovite pravilno skaliranje vašega uporabniškega vmesnika na različnih velikostih zaslona.
• Izkoristite obstoječe knjižnice in okvirje: Izkoristite obstoječe knjižnice in okvirje, ki ponujajo podporo za odzivno oblikovanje in ravnanje z usmerjenostjo zaslona.

Zaklepanje usmerjenosti in uporabniška izkušnja

Čeprav je na splošno najbolje dovoliti uporabnikom, da prosto vrtijo svoje naprave, obstajajo situacije, ko boste morda želeli zakleniti usmerjenost zaslona. Na primer, celozaslonski video predvajalnik lahko zaklene usmerjenost v ležeči način za optimalno gledanje.

Vendar je pomembno, da zaklepanje usmerjenosti uporabljate zmerno in uporabniku ponudite jasen razlog. Vsiljevanje usmerjenosti je lahko frustrirajoče in lahko naredi vašo aplikacijo manj dostopno.

Kako zakleniti usmerjenost zaslona

Android

V Androidu lahko usmerjenost zaslona zaklenete z nastavitvijo atributa `screenOrientation` v datoteki `AndroidManifest.xml`:

<activity
 android:name=".MyActivity"
 android:screenOrientation="landscape"
 ... >
</activity>

Usmerjenost lahko zaklenete tudi programsko:

setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

iOS

V iOS lahko podprte usmerjenosti določite v datoteki `Info.plist`. Prav tako lahko prepišete metodo `supportedInterfaceOrientations` v svojem view controllerju:

override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
 return .landscape
}

Globalni vidiki

Pri oblikovanju za globalno občinstvo upoštevajte naslednje glede usmerjenosti zaslona:

• Postavitve od desne proti levi (RTL): Razmislite, kako se bo vaš uporabniški vmesnik prilagodil jezikom RTL. Nekateri jeziki, kot sta arabščina in hebrejščina, se pišejo od desne proti levi. Zagotovite, da se vaša postavitev v načinu RTL pravilno zrcali. Auto Layout in ConstraintLayout pogosto ponujata vgrajeno podporo za postavitve RTL.
• Kulturne preference: Bodite pozorni na kulturne preference, povezane z uporabo naprav. Čeprav je večina uporabnikov navajena tako pokončnega kot ležečega načina, imajo lahko nekatere kulture subtilne preference. Testiranje z uporabniki iz različnih regij lahko prinese dragocene vpoglede.
• Dostopnost za raznolike uporabnike: Vedno dajte prednost dostopnosti. Zagotovite, da je vaša aplikacija uporabna za ljudi s posebnimi potrebami, ne glede na usmerjenost zaslona. To vključuje zagotavljanje alternativnega besedila za slike, zagotavljanje zadostnega barvnega kontrasta in podporo za podporne tehnologije.

Testiranje ravnanja z usmerjenostjo zaslona

Temeljito testiranje je bistvenega pomena za zagotovitev, da vaša aplikacija pravilno obravnava spremembe usmerjenosti zaslona. Tu je nekaj nasvetov za testiranje:

• Uporabite emulatorje in resnične naprave: Testirajte svojo aplikacijo tako na emulatorjih kot na resničnih napravah, da pokrijete širši spekter velikosti zaslonov in strojnih konfiguracij.
• Testirajte v različnih usmerjenostih: Testirajte svojo aplikacijo tako v pokončni kot ležeči usmerjenosti, pa tudi v obratni pokončni in obratni ležeči, če so podprte.
• Testirajte z različnimi velikostmi zaslona: Testirajte svojo aplikacijo na napravah z različnimi velikostmi zaslona, da zagotovite pravilno skaliranje uporabniškega vmesnika.
• Testirajte z različnimi velikostmi pisave: Testirajte svojo aplikacijo z različnimi velikostmi pisave, da zagotovite, da besedilo ostane berljivo.
• Testirajte z omogočenimi funkcijami za dostopnost: Testirajte svojo aplikacijo z omogočenimi funkcijami za dostopnost, kot so bralniki zaslona, da zagotovite, da ostane dostopna uporabnikom s posebnimi potrebami.
• Avtomatizirano testiranje: Implementirajte avtomatizirane teste uporabniškega vmesnika, ki pokrivajo spremembe usmerjenosti zaslona. To lahko pomaga ujeti regresije in zagotoviti dosledno obnašanje med izdajami.

Zaključek

Učinkovito ravnanje z usmerjenostjo zaslona je ključni vidik mobilnega in spletnega razvoja. Z razumevanjem različnih tehnik, ki so na voljo na vsaki platformi, in upoštevanjem najboljših praks lahko ustvarite aplikacije, ki zagotavljajo brezhibno in prijetno uporabniško izkušnjo, ne glede na to, kako uporabnik drži svojo napravo. Ne pozabite dati prednost testiranju in upoštevati globalne posledice svojih oblikovalskih odločitev, da zagotovite, da je vaša aplikacija dostopna in uporabniku prijazna za raznoliko občinstvo.